<template>
  <el-row class="RangeDrawer">
    <commonDrawer
      :title="drawerType === 'add' ? '新增标签' : '编辑标签'"
      :drawer="drawer"
      :isShowMoreBtn="true"
      @closeDraw="closeDraw"
      @cancelFun="closeDraw"
      @save="save"
    >
      <template slot="column">
        <div class="range-area" v-loading="loading">
          <el-form ref="formRef" :model="form" class="m7-form" label-position="top" :rules="rules">
            <el-form-item label="标签名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入标签名称"></el-input>
            </el-form-item>
            <el-form-item prop="color">
              <span slot="label">标签颜色</span>
              <el-color-picker style="float: left;margin: 9px 5px;" v-model="form.color" @change="colorChange"></el-color-picker>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
/**
 * 客户标签编辑
 */
import { Component, Vue, Ref } from 'vue-property-decorator';
import commonDrawer from '@/components/globalTool/resizeDrawer/drawer.vue';
import { commonAction, deepClone } from '@/utils/common';
@Component({
  name: 'EditFields',
  components: {
    commonDrawer
  }
})
export default class EditFields extends Vue {
  [x: string]: any
  @Ref() private readonly tree: any
  @Ref() private readonly uploadImage: any
  private drawer: boolean = false
  private drawerType: string = 'add'
  private data: any
  private loading: boolean = false
  private defaultColor = '#333'
  private form: any = {
    name: '',
    color: this.defaultColor
  }

  private rules = {
    name: [{ required: true, trigger: 'change', message: '请输入标签名称' }]
  }

  // 颜色如果被清空，使用默认值
  private colorChange (val) {
    if (!val) {
      this.form.color = this.defaultColor
    }
  }

  private async openDraw (data: any, type: string) {
    this.drawer = true
    this.$nextTick(() => {
      this.drawerType = type
      if (type === 'add') {
        this.form = { name: '', color: this.defaultColor }
      } else {
        this.form = { ...this.form, ...data }
      }
    })
  }

  private closeDraw () {
    this.drawer = false;
  }

  private save () {
    (this as any).$refs.formRef.validate(async (valid) => {
      if (valid) {
        let actionUrl = '/server-crm/action/config/customer/label/update' // 编辑
        if (this.drawerType === 'add') { // 新增
          actionUrl = '/server-crm/action/config/customer/label/create'
        }
        commonAction({ url: actionUrl, method: 'post', data: this.form }).then(res => {
          if (res.success) {
            this.closeDraw()
            this.$message({ message: '保存成功', type: 'success' })
            this.$emit('refresh')
            if (this.drawerType === 'add') {
              this.$addOneCache('customerAllLabels', res.data, true)
            } else {
              this.$updateCache('customerAllLabels', res.data, '_id', false)
            }
          }
        })
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.RangeDrawer
  .range-area
    .rightButton
      position: absolute
      top 0px
      right 0px
      padding-top 0px
      height: 12px
</style>
